<template>
  <el-breadcrumb :separator-icon="ArrowRight" class="bread">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item v-if="category.top" :to="`/category/${category.top.id}`">{{category.top.name}}</el-breadcrumb-item>
    <transition name="fade-right" mode="out-in">
      <el-breadcrumb-item v-if="category.sub" :key="category.sub.id">{{category.sub.name}}</el-breadcrumb-item>
    </transition>
  </el-breadcrumb>
</template>
<script setup>
import { useStore } from 'vuex'
import { useRoute } from 'vue-router'
import { computed } from 'vue'
import { ArrowRight } from '@element-plus/icons-vue'

  // 1. 获取二级分类的ID，在地址在路由中
  // route ===> this.$route
  const route = useRoute()
  // 2. 获取vuex中的类目数据
  // store ===> this.$store
  const store = useStore()
  // 3. 通过计算属性得到，二级类目的名称和ID，一级类目的名称和ID
  const category = computed(() => {
    const obj = {}
    store.state.category.list.forEach(top => {
      top.children && top.children.forEach(sub => {
        if (sub.id === route.params.id) {
          // 设置二级类目
          obj.sub = { id: sub.id, name: sub.name }
          // 设置一级类目
          obj.top = { id: top.id, name: top.name }
        }
      })
    })
    return obj
  })
</script>
<style scoped lang="less">
  .bread{
    display: flex;
    padding: 25px 10px;
    // ul li:last-child {}
    // 先找到父元素，找到所有的子元素，找到最后一个，判断是不是LI，是就是选中，不是就是无效选择器
    // ul li:last-of-type {}
    // 先找到父元素，找到所有的类型为li的元素，选中最后一个
    &-item {
      a {
        color: #666;
        transition: all .4s;
        &:hover {
          color: @mainColor;
        }
      }
    }
    i {
      font-size: 12px;
      margin-left: 5px;
      margin-right: 5px;
      line-height: 22px;
      // 样式的方式，不合理
      // &:last-child {
      //   display: none;
      // }
    }
  }
</style>